<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/base.css">
    <script src="static/js/jquery.js"></script>
    <script src="static/js/ajax.js"></script>
    <script src="static/layui/layui.js"></script>
</head>
<body>
<div class="layui-panel">
    <form class="layui-form" style="margin: 10px auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="name" class="layui-form-label">部门名称</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="name" id="name" placeholder="部门名称模糊查询">
                </div>
            </div>
            <div class="layui-inline">
                <label for="status" class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status" id="status">
                        <option value="">[选择状态]</option>
                        <option value="1">可用</option>
                        <option value="2">禁用</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button type="submit" lay-submit lay-filter="searchBtn" class="layui-btn">查询</button>
                    <button type="reset" class="layui-btn">清空</button>
                </div>
            </div>
        </div>

    </form>
</div>
<div class="layui-panel">
    <table id="dataTable"></table>
</div>
</body>
<script type="text/html" id="toolbar">
    <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">添加</button>
</script>
<script type="text/html" id="statusTemp">
    {{# if(d.status === 1){ }}
    <button type="button" class="layui-btn layui-btn-sm layui-bg-green" lay-event="status">可用</button>
    {{# }else{ }}
    <button type="button" class="layui-btn layui-btn-sm layui-bg-red" lay-event="status">禁用</button>
    {{# } }}
</script>
<script type="text/html" id="optTemp">
    <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="update">修改</button>
    <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="delete">删除</button>
</script>
<script>
    const {table, form} = layui;
    $(function () {
        table.render({
            elem: "#dataTable",
            url: "department/page",
            page: true,
            limit: 5,
            limits: [5, 10, 20, 50, 100],
            toolbar: "#toolbar",
            cols: [[
                {field: "id", title: "编号"},
                {field: "name", title: "部门名称"},
                {field: "profile", title: "部门介绍"},
                {field: "status", title: "状态", templet: "#statusTemp"},
                {title: "操作", templet: "#optTemp"}
            ]]
        });
        form.on("submit(searchBtn)", function (data) {
            table.reload("dataTable", {
                where: data.field,
                page: {
                    curr: 1
                }
            })
            return false;
        })
        table.on("tool(dataTable)", function (data) {
            const event = data.event;
            const id = data.data.id;
            switch (event) {
                case "status":
                    layer.confirm(`确定更改编号[${id}]的状态吗？`, {icon: 3, title: "询问"}, function (index) {
                        ajax.post("department/status", {
                            id, status: data.data.status === 1 ? 2 : 1
                        }).then(() => {
                            layer.msg("操作成功！", {icon: 6});
                            reloadTable();
                        })
                        layer.close(index);
                    })
                    break;
                case "delete":
                    layer.confirm(`确定删除编号[${id}]的数据吗？`, {icon: 3, title: "询问"}, function (index) {
                        ajax.delete("department/delete/" + id).then(() => {
                            layer.msg("删除成功！", {icon: 6});
                            reloadTable();
                        })
                        layer.close(index);
                    })
                    break;
                case "update":
                    layer.open({
                        type: 2,
                        content: "department/edit?id=" + id,
                        area: ["600px", "500px"]
                    })
                    break;
            }

        })
        table.on("toolbar(dataTable)", function (data) {
            if (data.event === "add") {
                layer.open({
                    type: 2,
                    content: "department/edit",
                    area: ["600px", "500px"]
                })
            }
        })
    })

    function reloadTable() {
        table.reload('dataTable');
    }
</script>
</html>

